<template>
	<el-dialog v-model="dialogVisible" append-to-body :show-close="false" :close-on-click-modal="false"
		class="flex-align" style="width: 100%;height: 100%;padding: 30px 24px;margin: 0;background: transparent;">
		<template #header>
			<el-card style="width: 100%;height: 100%;" body-style="padding: 0;" shadow="never">
				<template #header>
					<div class="flex-space-between">
						<div>
							<el-text style="font-size: 16px;">
								出库单
							</el-text>
						</div>
						<div>
							<el-button @click="closeDialog">取消</el-button>
							<el-button type="primary" @click="closeDialog">
								发起流程
							</el-button>
						</div>
					</div>
				</template>
				<el-scrollbar :style="`height: calc(100vh - 69px - ( 30px + 30px));`">
					<el-form model ref="vForm" rules label-position="top" label-width="50px" style="padding: 16px;">
						<!--  -->
						<el-form-item label="出库单号" prop="" class="form-item-bg">
							<el-input type="text" value="自动生成无需填写" readonly clearable></el-input>
						</el-form-item>
						<!--  -->
						<el-row :gutter="16">
							<el-col :span="12">
								<!--  -->
								<el-form-item label="出库状态" prop="" class="form-item-bg">
									<el-input readonly type="text" clearable>
										<template #prefix>
											<div>
												<el-check-tag
													:style="`color: ${segmentedIndex===key?'#fff':''};${segmentedIndex===key?`background: ${item.bg}`:''}`"
													v-for="(item,key) in segmentedList" :key="key"
													:checked="segmentedIndex===key"
													@change="tagChange(key)">{{item.text}}</el-check-tag>
											</div>
										</template>
									</el-input>
								</el-form-item>
								<!--  -->
							</el-col>
							<el-col :span="12">
								<!--  -->
								<el-form-item label="出库类型" prop="" class="form-item-bg">
									<el-input type="text" clearable></el-input>
								</el-form-item>
								<!--  -->
							</el-col>
						</el-row>
						<div class="static-content-item">
							<div>出库信息</div>
						</div>
						<el-row :gutter="16">
							<el-col :span="12">
								<!--  -->
								<el-form-item label="申请人" prop="">
									<el-input type="text" clearable></el-input>
								</el-form-item>
								<!--  -->
							</el-col>
							<el-col :span="12">
								<!--  -->
								<el-form-item label="申请日期" prop="">
									<el-input type="text" clearable></el-input>
								</el-form-item>
								<!--  -->
							</el-col>
						</el-row>
						<!--  -->
						<el-form-item label="出库总量" prop="">
							<el-input type="text" disabled placeholder="保存后显示计算结果" clearable></el-input>
						</el-form-item>
						<!--  -->
						<div class="static-content-item">
							<div>出库审核</div>
						</div>
						<el-row :gutter="16">
							<el-col :span="12">
								<!--  -->
								<el-form-item label="审批人" prop="" class="form-item-bg1">
									<el-input type="text" clearable></el-input>
								</el-form-item>
								<!--  -->
							</el-col>
							<el-col :span="12">
								<!--  -->
								<el-form-item label="出库日期" prop="" class="form-item-bg1">
									<el-input type="text" clearable></el-input>
								</el-form-item>
								<!--  -->
							</el-col>
						</el-row>
						<!--  -->
						<el-form-item label="出库拍照" prop="">
							<el-input readonly clearable>
								<template #prefix>
									<el-button text :icon="UploadFilled">
										上传图片
									</el-button>
								</template>
							</el-input>
						</el-form-item>
						<!--  -->
						<el-form-item label="备注" prop="">
							<el-input type="text" clearable></el-input>
						</el-form-item>
						<!--  -->
					</el-form>
				</el-scrollbar>
				<!--  -->
			</el-card>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { UploadFilled, } from '@element-plus/icons-vue';
	const segmentedList = ref([{
		text: '审核中',
		bg: '#3d97f2',
		value: 1
	}, {
		text: '已出库',
		bg: '#2fba2f',
		value: 2
	}, {
		text: '已驳回',
		bg: '#f25555',
		value: 3
	}, {
		text: '已撤销',
		bg: '#86a3bf',
		value: 4
	}]);
	const segmentedIndex = ref(0);
	//
	const tagChange = (index : number) => {
		segmentedIndex.value = index;
	}
	//
	const dialogVisible = ref(false);
	/**
	 * 打开弹出层
	 */
	const openDialog = (item : any) => {
		dialogVisible.value = true;
	}
	/**
	 * 关闭弹出层
	 */
	const closeDialog = (item : any) => {
		dialogVisible.value = false;
	}
	//暴露属性和方法给外部使用
	defineExpose({
		openDialog
	})
</script>
<style>
	@import '../../../assets/css/my-form-item.css';

	.form-item-bg {
		background-color: #bfdfff;
	}

	.form-item-bg1 {
		background-color: #a5f2e5;
	}
</style>

<style scoped lang="scss">
	@import '../../../assets/css/index.scss';
</style>